/**
 * 设备地图展示的filter
 */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Select, Input } from 'antd';
import AreaSelect from '../../../components/areaSelect';
import Pc, { isReleaseVersion } from '../../../components/permissionControl';
import { api as apiPaths } from '../../../services/device';

const Option = Select.Option;

const styles = {
	main: {
		margin: '1em 0'
	},
	select: {
		width: '10em'
	},
	input: {
		marginLeft: '1em',
		width: '10em',
	},
	but: {
		marginRight: '1em'
	},
	s: {
		float: 'right'
	},
	div: {
		padding: '0 1em',
		// borderRight: '1px solid #ccc',
		display: 'inline'
	}
};

const options = [
	{ name: '设备MAC', value: 'mac' },
	// { name: '投放点名称', value: 'launchAreaName' }
];

const statusOptions = [
	{ name: '设备状态', value: 0 },
	{ name: '使用中', value: 3 },
	{ name: '空闲', value: 4 },
	{ name: '禁用', value: 5 },
	{ name: '故障', value: 6 },
];


export const workStatusLease = [
	{ name: '设备状态', value: '' },
	{ name: '使用中', value: 3 },
	{ name: '空闲', value: 4 },
	{ name: '禁用', value: 5 },
	{ name: '故障', value: 6 }
];

export const workStatusGdms = [
	{ name: '设备状态', value: '' },
	{ name: '正常', value: 8 },
	{ name: '故障', value: 6 },
	{ name: '报警', value: 9 },
];

@connect(({ app }) => ({ user: app.user }))
class Filter extends Component {
	state = {
		key: 'mac',
		keyWord: '',
		workStatus: '',
		onlineStatus: 0
	}

	search = () => {
		const { search } = this.props;
		const { key, keyWord, workStatus, onlineStatus } = this.state;
		const labels = this.area.getValue();
		const [province, city, area] = labels;
		const queryData = {
			[key]: keyWord,
			workStatus, onlineStatus,
			province, city, area
		};
		for (const k in queryData) {
			queryData[k] ? null : delete queryData[k];
		}
		search(queryData);
	}

	reset = () => {
		this.area.setValue([], '', () => {
			this.setState({
				key: 'mac',
				keyWord: '',
				workStatus: '',
				onlineStatus: 0
			}, this.search);
		});
		this.props.reset();
	}

	render() {
		const { key, keyWord, onlineStatus, workStatus } = this.state;
		const { user } = this.props;
		const isRelease = isReleaseVersion(user.permissions, apiPaths.query);
		return (
			<div style={styles.main}>
				<div>
					<div style={styles.div}>
						<Select style={styles.select} value={key} onChange={key => this.setState({ key, keyWord: '' })}>
							{options.map(o => <Option value={o.value}>{o.name}</Option>)}
						</Select>
						<Input placeholder="输入关键字" style={styles.input} value={keyWord} onChange={e => this.setState({ keyWord: e.target.value })} />
					</div>
					<div style={styles.div}>
						<AreaSelect ref={d => this.area = d} />
					</div>
					{/*<div style={styles.div}>
						<Select style={styles.select} value={workStatus} onChange={workStatus => this.setState({ workStatus })}>
							{(isRelease ? workStatusLease : workStatusGdms).map(o => <Option value={o.value}>{o.name}</Option>)}
						</Select>
					</div>*/
			/*		<div style={styles.div}>
						<Select style={styles.select} value={onlineStatus} onChange={onlineStatus => this.setState({ onlineStatus })}>
							<Option value={0}>在线状态</Option>
							<Option value={1}>在线</Option>
							<Option value={2}>离线</Option>
						</Select>
					</div>*/}
					<div style={styles.s}>
						<Button
							type="primary"
							style={styles.but}
							onClick={this.search}
							icon="search"
							className="search"
						>搜索</Button>
						<Button onClick={this.reset} icon="sync">重置</Button>
					</div>
				</div>
			</div>
		);
	}
}

export default Filter;
		// borderRight: '1px solid #ccc',
